@charset "utf-8";
@import"commom/rest";
@function n($px) {
    @return $px/2;
}

img {
    width: 100%;
}

@function d($px) {
    @return $px/640*100%;
}

.web {
    background: url(../img/beijin.png) no-repeat;
    background-size: 100% 100%;
}

.fix_bg {
    background: url(../img/neiye/beijin.png);
}

.warp {
    ////  background: url(../img/beijin.png) no-repeat;
    // background-size: 100% 100%;
    .logo_img {
        padding: n(44px) 0 0 n(44px);
        width: d(147);
        @extend img;
    }
    .dwenzi {
        margin-top: n(50px);
        font-size: 0;
        position: relative;
        .dayun {
            width: d(77);
            height: n(56px);
            position: absolute;
            -webkit-animation: aloat 5s linear 2s infinite alternate;
            img {
                width: n(77px);
                height: n(78px);
            }
            top: n(334px);
            left:d(106);
            @-webkit-keyframes aloat {
                0% {
                    top: n(334px);
                    left: n(56px);
                }
                20% {
                    top: n(334px);
                    left: n(200px);
                }
                40% {
                    top: n(334px);
                    left: n(400px);
                }
                60% {
                    top: n(334px);
                    left: n(600px);
                }
                80% {
                    top: n(334px);
                    left: n(800px);
                }
                100% {
                    top: n(334px);
                    left: n(800px);
                }
            }
        }
        .yun2 {
            margin-right: d(58);
            float: right;
            position: relative;
            -webkit-animation: yun2 5s linear 2s infinite alternate;
            @-webkit-keyframes yun2 {
                0% {
                    top: 0;
                    right: n(100px);
                }
                25% {
                    top: 0;
                    right: n(400px);
                }
                75% {
                    top: 0;
                    right: n(800px);
                }
                100% {
                    top: 0;
                    right: n(500px);
                }
            }
        }
        h4 {
            margin: 0 auto;
            width: d(381);
            height: n(71px);
            @extend img;
        }
        h5 {
            margin: 0 auto;
            width: n(576px);
            height: n(157px);
            @extend img;
        }
        h6 {
            margin: 0 auto;
            width: n(352px);
            height: n(62px);
            @extend img;
        }
        h3 {
            margin: 0 auto;
            margin-top: n(20px);
            width: n(341px);
            height: n(29px);
            @extend img;
        }
    }
    .bottom {
        .yueqiu_box {
            top: n(-176px);
            left: n(16px);
            width: n(202);
            float: right;
            margin-right: n(92px);
            position: relative;
            transform-style: preserve-3d;
            animation: yq 6s infinite;
            @-webkit-keyframes yq {
                to {
                    transform: rotateY(360deg) translateZ(93PX);
                }
            }
            .yueqiulg {
                width: n(204px);
                height: n(222px);
                @extend img;
            }
            .yueqiu {
                position: absolute;
                top: n(78px);
                left: n(72px);
                width: n(65px);
                height: n(65px);
                @extend img;
            }
        }
        .yun1 {
            position: relative;
            float: right;
            .yuna {
                width: n(43px);
                height: n(42px);
                @extend img;
            }
            .yunb {
                width: n(34px);
                height: n(25px);
                @extend img;
                margin-top: n(59px);
            }
            .yunc {
                width: n(59px);
                height: n(44px);
                margin-right: n(49px);
                position: absolute;
                top: n(100px);
                left: n(86px);
            }
        }
        .ren_bottom {
            position: relative;
            .howe:hover {
                transform: scale(1.2);
            }
            .ren_img {
                position: absolute;
                top: n(-68px);
                left: 0;
                right: 0;
                margin: 0 auto;
                width: n(339px);
                @extend img;
            }
            .minyue {
                width: n(94px);
                height: n(69px);
                @extend img;
                margin-left: n(81px);
            }
            .zheshi {
                width: n(148px);
                height: n(82px);
                position: absolute;
                top: n(12px);
                right: n(48px);
            }
            .zhuyaokan {
                width: n(128px);
                height: n(78px);
                margin-left: n(88px);
                margin-top: n(184px);
            }
            .taizi {
                width: n(94px);
                height: n(57px);
                position: absolute;
                top: n(256px);
                right: n(60px);
            }
        }
        .inpuy {
            position: relative;
            a {
                margin: 0 auto;
                margin-top: n(30px);
                display: block;
                width: n(171px);
                height: n(70px);
            }
        }
    }
}

.active .logo_img {
    animation-name: zoomInLeft;
    animation-delay: 100ms;
}

.active h4 {
    animation-name: shake;
    animation-delay: 200ms;
}

.active h5 {
    animation-name: rubberBand;
    animation-delay: 250ms;
}

.active h6 {
    animation-name: rubberBand;
    animation-delay: 250ms;
}

.active h3 {
    animation-name: bounce;
    animation-delay: 300ms;
}

.active {
    .minyue,
    .zheshi,
    .zhuyaokan,
    .taizi {
        animation-name: zoomInUp;
        animation-delay: 300ms;
    }
    .ren_img {
        animation-name: bounceInDown;
        animation-delay: 400ms;
    }
    .inpuy {
        animation-name: bounceInUp;
        animation-delay: 500ms;
    }
}

.active .kendiegou {
    animation-name: bounceInDown;
    animation-delay: 100ms;
}

.active .bottom_b:nth-of-type(1) {
    animation-name: bounceInLeft;
    animation-delay: 200ms;
}

.active .bottom_b:nth-of-type(2) {
    animation-name: bounceInLeft;
    animation-delay: 300ms;
}

.active .bottom_b:nth-of-type(3) {
    animation-name: bounceInLeft;
    animation-delay: 400ms;
}

.active .bottom_b:nth-of-type(4) {
    animation-name: bounceInLeft;
    animation-delay: 500ms;
}

.active .wezi {
    animation-name: tada;
    animation-delay: 200ms;
}

.active .piao {
    animation-name: rubberBand;
    animation-delay: 500ms;
}

.active .hulu {
    animation-name: rubberBand;
    animation-delay: 500ms;
}

.active .logoa {
    animation-name: zoomInRight;
    animation-delay: 200ms;
}

.active .p {
    animation-name: zoomInRight;
    animation-delay: 500ms;
}

.active .o {
    animation-name: zoomInRight;
    animation-delay: 400ms;
}

.active .i {
    animation-name: zoomInRight;
    animation-delay: 300ms;
}

.active .u {
    animation-name: zoomInRight;
    animation-delay: 200ms;
}

@media only screen and (max-height:555.5px) {
    .warp .dwenzi {
        margin-top: 0px;
        h4 {
            width: 46.53125%;
        }
    }
    .warp .bottom .inpuy a {
    margin-top: 4px;
}
    .warp .logo_img {
        padding: 11px 0 0 22px;
    }
    .warp .dwenzi h5 {
        margin: 0 auto;
        width: 213px;
        height: 61.5px;
    }
    .warp .bottom .ren_bottom .ren_img {
        width: 144.5px;
    }
    .warp .dwenzi h3 {
        margin-top: 5px;
    }
}

@media only screen and (min-height:556px) and (max-height:591px) {
    
    
    
}
